<template>
	<view>
		
 		<view class="logo">
			<image src="/static/icon/login.png" class="img"></image>
			<u-search placeholder="搜索" v-model="keyword" shape="round" :clearabled="true" :animation="true" class="search"></u-search>
		</view> 
		
    <u-swiper
            :list="list2"
            keyName="image"
            showTitle
            :autoplay="false"
            circular
			interval="2000"
			height="200"
    ></u-swiper>
		
		<view>
			<u--text text="全部标签"  size="70rpx" bold="true" align="left"></u--text>
		</view>
	<view>	
			<image class="goodsimg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp5.itc.cn%2Fimages01%2F20210611%2F192ac508843b414396cd019b89d36d6e.jpeg&refer=http%3A%2F%2Fp5.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652496552&t=e2953a9acb5b95669ca6ce313bc220f9"></image>
	</view>
	<view class="u-demo-block__content">
	    <u-row
	            justify="space-between"
	            gutter="10"
	    >
	        <u-col span="10">
	            <view class="demo-layout bg-purple">
					<u--image class="goodsimg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp5.itc.cn%2Fimages01%2F20210611%2F192ac508843b414396cd019b89d36d6e.jpeg&refer=http%3A%2F%2Fp5.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652496552&t=e2953a9acb5b95669ca6ce313bc220f9" width="150px" height="125px"></u--image>
				</view>
	        </u-col>
	        <u-col span="10">
	            <view class="demo-layout bg-purple-light">
					<u--image class="goodsimg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp5.itc.cn%2Fimages01%2F20210611%2F192ac508843b414396cd019b89d36d6e.jpeg&refer=http%3A%2F%2Fp5.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652496552&t=e2953a9acb5b95669ca6ce313bc220f9" width="150px" height="125px"></u--image>
				</view>
	        </u-col>
	        <u-col span="3">
	            <view class="demo-layout bg-purple"></view>
	        </u-col>
	        <u-col span="3">
	            <view class="demo-layout bg-purple-light"></view>
	        </u-col>
	    </u-row>
	</view>
	
	</view>
</template>

<script>
		export default {
			data() {
				return {
					keyword: '',
                 list2: [{
                                    image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic189.nipic.com%2Ffile%2F20181103%2F23352985_081841370000_2.jpg&refer=http%3A%2F%2Fpic189.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652448719&t=ac50bf79ab40e14031880acffef2122b',
                                    title: '解封之后，来一场计划已久的旅行',
                                },{
                                    image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.c1s.com%2Fd%2Ffile%2Fp%2Fpic%2F2019%2F1229%2F201912435098rbxht5ukreg.jpg&refer=http%3A%2F%2Fwww.c1s.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652449308&t=eb13d09cb96f999482829afb67ba3174',
                                    title: '阳光体育，篮球场上挥洒汗水',
                                },{
                                    image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01dc8055458be60000019ae975c338.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652450762&t=5c810343ceb24899e470f032289eac16',
                                    title: '你所思念的家乡,有怎样的风景',
                                }],
				}
			}
		}
</script>

<style>
	page {
		background-color: rgb(234,239,255)
	}
	.logo{
		display: flex;
	}
	.img{
		width: 150rpx;
		height: 125rpx;
	}
	.search{
		height: 150rpx;
	}
	.text{
		font-size: 50rpx;
	}
	.goodsimg{
		z-index:0;
	}
	 .wrap {
	        padding: 12px;
	    }
	
	    .demo-layout {
	        height: 25px;
	        border-radius: 4px;
	    }
	
	    .bg-purple {
	        background: #CED7E1;
	    }
	
	    .bg-purple-light {
	        background: #e5e9f2;
	    }
	
	    .bg-purple-dark {
	        background: #99a9bf;
	    }
	</style>
	#混合布局
	通过指定col组件的span属性，指定不同的值，达到不同的比例
	
	<view class="u-demo-block__content">
	    <u-row
	        justify="space-between"
	        gutter="10"
	    >
	        <u-col span="2">
	            <view class="demo-layout bg-purple-light"></view>
	        </u-col>
	        <u-col span="4">
	            <view class="demo-layout bg-purple"></view>
	        </u-col>
	        <u-col span="6">
	            <view class="demo-layout bg-purple-dark"></view>
	        </u-col>
	    </u-row>
	</view>
	
	<style lang="scss">
	    .wrap {
	        padding: 12px;
	    }
	
	    .demo-layout {
	        height: 25px;
	        border-radius: 4px;
	    }
	
	    .bg-purple {
	        background: #CED7E1;
	    }
	
	    .bg-purple-light {
	        background: #e5e9f2;
	    }
	
	    .bg-purple-dark {
	        background: #99a9bf;
	    }
</style>
